import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import { NavBar, Tag, InfiniteScroll } from 'antd-mobile'
import { ProductCard } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { LocationFill } from 'antd-mobile-icons'
function Index() {
    const navigate = useNavigate()
    const [hasMore, setHasMore] = useState(true)
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const getList = async () => {
        const res = await http.get('/api/list', { params: { page } })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
            setPage((prev) => prev + 1)
        }

        if (data.length === 0) {
            setHasMore(false)
        }

    }

    useEffect(() => {
        getList()
    }, [])

    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>通知</NavBar>
            <div>
                {
                    list?.map((item, ind) => (
                        <ProductCard
                            onClick={() => navigate('/liaotian')}
                            key={ind}
                            price={<div style={{ display: 'flex', alignItems: 'center' }}><LocationFill />8小时前</div>}
                            title={item.title}
                            thumb={item.image}
                        />
                    ))
                }
                <InfiniteScroll loadMore={getList} hasMore={hasMore} />
            </div>
        </div>
    )
}

export default Index
